<template>
  <div>
    <window-title title="周日约跑相册"></window-title>
    <div class="album-btn-set" v-if="!is_set">
      <el-button size="mini" type="info" icon="el-icon-back" @click="backJump()">返回</el-button>
      <!-- <el-button size="mini" class="com-btn" icon="el-icon-upload2" @click="upImgs()">上传图片</el-button>
      <el-button size="mini" type="warning" icon="el-icon-edit" @click="albumSet(1)">批量操作</el-button> -->
    </div>
    <!-- <div class="album-btn-set" v-if="is_set">
      <el-button size="mini" type="info" icon="el-icon-close" @click="albumSet(2)">取消操作</el-button>
      <el-button
        size="mini"
        type="warning"
        icon="el-icon-edit"
        :disabled="checked_list.length > 0 ? false : true"
        @click="deletePhoto()"
      >批量删除</el-button>
    </div> -->
    <div>
      <div class="album-detail-list" v-if="pic_list.length > 0">
        <el-row :gutter="20">
          <el-col :span="4" v-for="(item,key) in pic_list" :key="key">
            <div class="album-detail-img">
              <el-image
                class="album-img-src"
                fit="cover"
                :src="item.src + '?x-oss-process=image/resize,h_300'"
              ></el-image>
              <el-checkbox v-model="item.checked" class="album-select-checkbox" v-if="is_set" @change="checkedSet(item)"></el-checkbox>
              <div class="view-pic-btn" @click="showView(key)">
                <i class="el-icon-view"></i>
                <span>预览</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div v-else class="album_empty">
        <img src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/7b01bdfe3f80378002f7ca7c4e77ec3.png" />
        <div>暂无照片，请上传</div>
      </div>
      <div class="reload-more-btn" @click="loadMore()" v-if="last_page > current_page">点击加载更多</div>
    </div>
    <!-- 相册查看 -->
    <div
      class="album-view-box"
      :style="pic_view ? 'transform:scale(1)' : 'transform:scale(0)'"
      v-loading="pic_load"
    >
      <div class="img-views">
        <div class="img-views-btn">
          <i class="el-icon-caret-top"></i>
        </div>
        <ul class="img-views-list" ref="pic_view_scroll">
          <li
            v-for="(item,key) in pic_list"
            :key="key"
            :class="pic_index == key ? 'active' : ''"
            @click="changeIage(key)"
          >
            <el-image
              :src="item.src + '?x-oss-process=image/resize,h_300'"
              fit="cover"
              class="img-views-src"
            ></el-image>
          </li>
        </ul>
        <div class="img-views-btn">
          <i class="el-icon-caret-bottom"></i>
        </div>
      </div>
      <img
        @click="changeImg()"
        :src="img_src +'?x-oss-process=image/auto-orient,1'"
        :class="pic_btn == 1 ? 'album-view-src img-view-cursor-left' : 'album-view-src img-view-cursor-right'"
        @mousemove="movePic"
        :ref="'view_imgs'+pic_index"
      />
      <i class="el-icon-close close-view" @click="closeView()"></i>
    </div>
  
  </div>
</template>

<script>
import windowTitle from "../../../components/unit/title.vue";

export default {
  components: { windowTitle },
  props: { album_id: {} },
  data() {
    return {
      is_set: false,
      checked: false,
      pic_list: [
        {src:require('../../../assets/img/logo.png')},
        {src:require('../../../assets/img/logo.png')}
      ],
      current_page: 1,
      last_page: 1,
      pic_index: 0,
      pic_num: 50,
      pic_view: false,
      pic_load: false,
      pic_btn: 1,
      img_src: "",
      up_dialog: false,
      load: true,
      checked_list : []
    };
  },
  mounted() {
  
  },
  methods: {

    //加载更多
    loadMore(){
      if(this.current_page < this.last_page){
        this.current_page ++;
        // this.getData();
      }
    },
    //删除照片
    deletePhoto(){
      this.$confirm('确定删除这些照片?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.ajaxs('album/deletePhoto',{
            data:{ ids : this.checked_list },
            success:(res) => {
              this.toast(res.code,res.msg);
              if(res.code) {
                this.current_page = 1;
                // this.getData();
              }
            }
          });
        }).catch(() => {      
        });
    },
    /**
     * 选中图片
     */
    checkedSet(data){
      this.$forceUpdate();
      if(data.checked) {
        if(!this.checkInArr(data.id,this.checked_list))this.checked_list.push(data.id);
      }else{
        for(var i in this.checked_list){
          if(this.checked_list[i] == data.id)this.checked_list.splice(i,1);
        }
      }
    },
    /**
     * 检测字符串是否在数组中
     */
    checkInArr(str,arr){
      for(var i in arr) {
        if(arr[i] == str)return true;
      }
      return false;
    },
  
 
    //切换图片
    changeImg() {
      if (this.pic_btn == 1) {
        this.pic_index < this.pic_list.length - 1
          ? this.pic_index++
          : (this.pic_index = 0);
      } else {
        this.pic_index > 0
          ? this.pic_index--
          : (this.pic_index = this.pic_list.length - 1);
      }
      this.changePicView();
    },
    //切换图片
    changeIage(key) {
      this.pic_index = key;
      this.changePicView();
    },
    //在图片上移动
    movePic(e) {
      var img = this.$refs["view_imgs" + this.pic_index];
      var width = img.width;
      var offsetX = e.offsetX;
      if (offsetX > width / 2) {
        this.pic_btn = 1;
      } else {
        this.pic_btn = 2;
      }
    },
    //返回页面
    backJump() {
      this.$emit("back");
    },
    //批量操作
    albumSet(param) {
      this.is_set = param == 1 ? true : false;
    },
    //查看照片
    showView(key) {
      this.pic_view = true;
      this.pic_index = key;
      this.changePicView();
    },
    //切换图片
    changePicView() {
      this.pic_load = true;
      var img = new Image();
      img.src = this.pic_list[this.pic_index].src;
      img.onload = () => {
        this.img_src = img.src;
        this.pic_load = false;
      };
    },
    //关闭查看
    closeView() {
      this.pic_view = false;
      this.pic_index = "";
    }
  },
  watch: {
    pic_index(val, old) {
      var scroll = this.$refs.pic_view_scroll;
      var height = scroll.offsetHeight;
      console.log(height);
      scroll.scrollTop = this.pic_index * 150 - height / 2 + 150;
    }
  }
};
</script>

<style>
.img-view-cursor-left {
  cursor: url("https://ykp-new.oss-cn-hangzhou.aliyuncs.com/cur-right.ico"),
    auto;
}
.img-view-cursor-right {
  cursor: url("https://ykp-new.oss-cn-hangzhou.aliyuncs.com/cur-left.ico"), auto;
}
.img-views-list {
  width: 100%;
  height: calc(100% - 80px);
  overflow-y: auto;
}
.img-views-list > li,
.img-views-src {
  width: 100%;
  height: 140px;
  cursor: pointer;
}
.img-views-list > li {
  border: 4px solid #ccc;
  height: 148px;

  /* border-right: none;
    border-left: none; */
}
.img-views-list .active {
  border-color: #dd2222;
}
.img-views-btn {
  width: 100%;
  height: 40px;
  background: #333;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  font-size: 20px;
  color: #fff;
}
.img-views {
  position: absolute;
  width: 150px;
  height: 100%;
  top: 0;
  left: 0;
  background: #333;
  box-shadow: 1px 1px 3px rgba(26, 26, 26, 0.3);
}
.close-view {
  position: absolute;
  right: 20px;
  top: 20px;
  background: #fff;
  padding: 8px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
}
.album-view-src {
  display: block;
  margin: auto;
  border: 3px solid #fff;
  max-height: calc(100% - 80px);
  max-width: calc(100% - 400px);
  transition: all 0.2 linear;
}
.album-view-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: Center;
  transition: all 0.2s linear;
}
.view-pic-btn {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
  text-align: center;
  line-height: 146px;
  color: #fff;
  opacity: 0;
  transition: all 0.2s linear;
}
.view-pic-btn i {
  margin-right: 5px;
}
.album-btn-set {
  margin-top: 20px;
}
.album-detail-list {
  margin-top: 20px;
}
.album-detail-img {
  width: 100%;
  height: 146px;
  cursor: pointer;
  margin-bottom: 20px;
  position: relative;
}
.album-detail-img:hover .view-pic-btn {
  opacity: 1;
}
.album-img-src {
  width: 100%;
  height: 146px;
}
.album-select-checkbox {
  position: absolute;
  top: 0;
  right: 5px;
}
.album_empty {
  margin-top: 20px;
  text-align: center;
}
.album_empty > img {
  width: 80px;
  display: block;
  margin: auto;
}
.album_empty > div {
  margin-top: 10px;
  color: #999;
}
.reload-more-btn{
  margin:20px auto;
  text-align: center;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  background: #8a70c6 ;
  width: 200px;
  color: #fff;
  cursor: pointer;
}
</style>